<template>
  <Layout>
    <section>
      <el-card shadow="never" style="min-height: 600px;margin-bottom: 20px;">
        <el-collapse v-model="active" accordion>
          <el-collapse-item title="如何部署" name="deploy">
            <el-carousel trigger="click" height="352px" :autoplay="false" @change="deployChange">
              <el-carousel-item v-for="(item,index) in deploy.images" :key="'deploy'+index">
                <div style="border-radius:5px; border: 1px solid #EBEEF5;height: 350px;">
                  <img :src="item" style="width: 100%;height:350px;">
                </div>
              </el-carousel-item>
            </el-carousel>
            <el-steps
              :active="deploy.active"
              align-center
              style="margin-top: 20px;"
              :process-status="deploy.status"
            >
              <el-step
                title="克隆项目"
                description="https://github.com/GitHub-Laziji/GitHub-Laziji.github.io"
              ></el-step>
              <el-step
                title="修改配置"
                description="将 /configuration.json 中的 githubUsername  改为自己的"
              ></el-step>
              <el-step title="查看效果" description="https://用户名.github.io 就是你的博客了"></el-step>
            </el-steps>
          </el-collapse-item>
          <el-collapse-item title="如何使用" name="use">
            <el-carousel trigger="click" height="352px" :autoplay="false" @change="useChange">
              <el-carousel-item v-for="(item,index) in use.images" :key="'use'+index">
                <div style="border-radius:5px; border: 1px solid #EBEEF5;height: 350px;">
                  <img :src="item" style="width: 100%;height:350px;">
                </div>
              </el-carousel-item>
            </el-carousel>
            <el-steps
              :active="use.active"
              align-center
              style="margin-top: 20px;"
              :process-status="use.status"
            >
              <el-step title="获取Token" description="在GitHub上获取调用API所需的Token"></el-step>
              <el-step title="登录" description="将获取的Token绑定上"></el-step>
              <el-step title="发个博客" description="点击博客列表右上角的发布博文按钮"></el-step>
            </el-steps>
          </el-collapse-item>
          <el-collapse-item title="开发注意事项" name="develop">
            <div style="padding: 10px;line-height: 30px;color: #303133;font-size: 16px">
              配置文件读取的总是与
              <tt>index.html</tt>同级的
              <tt>./configuration.json</tt>, 而修改配置的时候是通过
              <tt>github-api</tt>修改
              <tt>你的用户名.github.io</tt>下的
              <tt>/configuration.json</tt>, 所以本地
              <tt>npm run dev</tt>的时候会出现修改配置无效的情况, 如果需要修改的话修改本地的配置文件就行, 发布到
              <tt>github</tt>之后不影响
            </div>
          </el-collapse-item>
        </el-collapse>
      </el-card>
    </section>
  </Layout>
</template>

<script>
export default {
  name: "HelperPage",
  data() {
    return {
      active: "deploy",
      deploy: {
        images: [
         '/images/deploy0.png',
         '/images/deploy1.png',
         '/images/deploy2.png',
        ],
        status: "process",
        active: 0,
      },
      use: {
        images: [
         '/images/use0.png',
         '/images/use0.png',
         '/images/use0.png',
        ],
        status: "process",
        active: 0,
      },
    }
  },
  metaInfo: {
    title: "Helper us",
  },
  methods: {
    deployChange(index) {
      this.deploy.status = index == 2 ? "success" : "process";
      this.deploy.active = index;
    },
    useChange(index) {
      this.use.status = index == 2 ? "success" : "process";
      this.use.active = index;
    },
  },
};
</script>
